<template>
  <div class="infinite-container" id="expressInfo">
    <div class="bgwhite">
      <mu-list>
        <!--<mu-list-item title="物流状态">-->
          <!--<span slot="right">{{}}</span>-->
        <!--</mu-list-item>-->
        <!--<mu-divider/>-->
        <mu-list-item title="承运公司">
          <span slot="right">{{baseInfo.expressCompany}}</span>
        </mu-list-item>
        <mu-divider/>
        <mu-list-item title="运单编号">
          <span slot="right">{{baseInfo.expressNumber}}</span>
        </mu-list-item>
        <mu-divider/>
        <!--<mu-list-item title="联系电话">-->
          <!--<span slot="right">{{}}</span>-->
        <!--</mu-list-item>-->
        <!--<mu-divider/>-->
      </mu-list>
    </div>

    <div class="mt10 bgwhite pt10" v-if="baseInfo.list">
      <mu-stepper :activeStep="activeStep" orientation="vertical">
        <mu-step v-for="(value, index) in baseInfo.list" :key="index">
          <mu-step-label>
            <div>
              <p>{{value.acceptAddress}} {{value.remark}}</p>
              <p>{{value.acceptTime}}</p>
            </div>
          </mu-step-label>
          <!--<mu-step-content>-->
            <!--<p>{{value.acceptTime}}</p>-->
          <!--</mu-step-content>-->
        </mu-step>
      </mu-stepper>
    </div>
  </div>
</template>

<script>
  import { commonAjaxJson, RESTFUL_API } from "@/api/api";
  export default {
    data() {
      return {
        activeStep: 0,
        baseInfo: ''
      }
    },
    mounted() {
      this.queryExpressInfo()
    },
    methods: {
      queryExpressInfo () {
          commonAjaxJson(RESTFUL_API.getExpressDetail, {
          invoiceNumber: this.$route.query.invoiceNo
        }, true).then(res => {
              if (res.data.code == 200) {
            this.baseInfo = res.data.data
          }
        })
      }
    }
  }
</script>

<style lang="less">
  #expressInfo {
    .mu-stepper-vertical .mu-step-label {
      height: 90px;
    }
  }
</style>
